<template>
  <div class="home">
    <a name="Home"></a>
    <Navigator :bgColor="navigatorColor"></Navigator>
    <div class="banner"></div>
    <div class="main">
      <MyProducts></MyProducts>
      <ProductIntroduce></ProductIntroduce>
      <ProductsNews></ProductsNews>
      <AboutMe></AboutMe>
      <ContactUs></ContactUs>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Navigator from "components/Navigator";

import MyProducts from "./childCompoenets/MyProducts";
import ProductIntroduce from "./childCompoenets/ProductIntroduce";
import ProductsNews from "./childCompoenets/ProductsNews";
import AboutMe from "./childCompoenets/AboutMe";
import ContactUs from "./childCompoenets/ContactUs";
export default {
  name: "Home",
  data() {
    return {
      navigatorColor: "",
    };
  },
  components: {
    Navigator,
    MyProducts,
    ProductIntroduce,
    ProductsNews,
    AboutMe,
    ContactUs
  },
  mounted() {
    /* 绑定滚动事件 */
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    /* 获取滚动时的高度 */
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 0) {
        this.navigatorColor = "white";
      }
      if (scrollTop < 5) {
        this.navigatorColor = "";
      }
    },
  },
  destroyed() {
    /* 页面销毁时移除滚动事件 */
    document.removeEventListener("scroll", this.handleScroll);
  },
};
</script>
<style lang="less" scope>
.home {
  display: flex;
  flex-direction: column;
  .navigator {
    position: fixed;
    z-index: 2;
  }
  .banner {
    flex-shrink: 0;
    // min-width: 192rem;
    width: 100vw;
    height: 67.4rem;
    background-image: url("https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/banner.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .main {
    flex-shrink: 0;
    background: linear-gradient(45deg, #aed3e5, #ffffff);
  }
}
</style>
